<template>
	<view class="container">
		<view class="header ">
			<nav-bar :title="student_info.name" color="white" :bg="navBarBg" />
			<view class="flex-space-between">
				<view class="flex-align">
					<view class="avatar">
						<van-image :src="student_info.head_img" mode="aspectFit" width="84rpx" height="84rpx" round />
						<!-- <view class="age age-1">
							15
						</view> -->
					</view>
					<view>
						<view class="num">学号：{{student_info.student_no}}</view>
						<view class="flex-align">
							<view class="tag flex-center">
								已上课:<text>{{student_info.already_in_class}}/{{student_info.hour_num}}</text>
							</view>
							<!-- <view class="tag flex-center">
								异常:<text>0</text>
							</view> -->
						</view>
					</view>
				</view>
				<view class="arrow flex-center">
					<van-icon name="arrow" size="30rpx" color="white" @click="href" />
				</view>
			</view>

		</view>

		<view class="con">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="top flex-space-between">
					<view>{{item.train_content}}</view>
					<view>{{item.record_date}} {{item.start_time}}-{{item.end_time}}</view>
				</view>
				<view class="center flex-center" v-if="item.class_status != 2 && item.class_status != 3">
					<view v-if="item.is_sign_in == 2" style="text-align: center;">
						<view class="">
							{{item.sign_in}}
						</view>
						<view style="color: rgb(107, 196, 113);">
							已签到
						</view>
					</view>
					<!-- <view class="tag">已上课</view> -->
					<view v-if="item.is_sign_out == 2" style="margin-left: 10rpx;text-align: center;">
						<view class="">
							{{item.sign_out}}
						</view>
						<view style="color: rgb(107, 196, 113);">
							已签退
						</view>
					</view>
					<image v-if="item.class_elimination == 2" style="width: 127rpx;height: 109rpx;margin-left: 20rpx;"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/38c8f783ced5022deb7089ce5c3e2ff08161e1e2.png"
						mode=""></image>
				</view>
				
				<view class="center flex-center" v-if="item.class_status != 2 && item.class_status == 3">
					<view>
						{{item.start_time}}
					</view>
					<view class="tag">未上课</view>
					<view>{{item.end_time}}</view>
				</view>
				
				<view class="center flex-center warning" v-if="item.class_status == 2">
					<view class="" style="text-align: center;">
						<view class="">
							{{item.sub_leave_time}}
						</view>
						<view style="color: rgb(235, 71, 81);">
							请假
						</view>
					</view>
				</view>
				<view class="bottom flex-space-between">
					<view class="flex-center">
						<!-- <image mode="aspectFit"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/623acb321ac1987480fb343df7aaba71774e9fb6.png" />
						<view>大连体育馆第一用词</view> -->
					</view>
					<view v-if="item.class_status == 1">已上课</view>
					<view v-if="item.class_status == 2">请假</view>
					<view v-if="item.class_status == 3">未上课</view>
				</view>
			</view>
			<!-- <view class="item">
				<view class="top flex-space-between">
					<view>第一节 游泳基本认知</view>
					<view>2020/12/12</view>
				</view>
				<view class="center flex-center warning">
					<view>
						10:00:00
					</view>
					<view class="tag">缺勤</view>
					<view>10:32:12</view>
				</view>
				<view class="bottom flex-space-between">
					<view class="flex-center">
						<image mode="aspectFit"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/623acb321ac1987480fb343df7aaba71774e9fb6.png" />
						<view>大连体育馆第一用词</view>
					</view>
					<view>已开课</view>
				</view>
			</view>
			<view class="item">
				<view class="top flex-space-between">
					<view>第一节 游泳基本认知</view>
					<view>2020/12/12</view>
				</view>
				<view class="center flex-center error">
					<view>10:00:00</view>
					<view class="tag">未上课</view>
					<view>10:32:12</view>
				</view>
				<view class="bottom flex-space-between">
					<view class="flex-center">
						<image mode="aspectFit"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/623acb321ac1987480fb343df7aaba71774e9fb6.png" />
						<view>大连体育馆第一用词</view>
					</view>
					<view>已开课</view>
				</view>
			</view> -->

		</view>
	</view>
</template>

<script>
	const personal = require("@/api/personal/index.js");
	import navbar from '@/mixins/navbar.js';
	export default {
		mixins: [navbar({
			navBarColor: '#fff',
			activeNavBarBg: "#7f7bf6"
		})],
		data() {
			return {
				student_id: '',
				class_id: '',
				list: [],
				student_info: {}
			}
		},
		onLoad(options) {
			this.student_id = options.student_id
			this.class_id = options.class_id
			this.student_times()
		},
		methods: {
			// 班级课节列表
			async student_times() {
				let that = this;
				let params = {
					app_id: this.$https.weixinAppId,
					student_id: this.student_id,
					class_id: this.class_id,
				};
				let res = await personal.student_times(params);
				if (res.code == 1) {
					this.list = res.data.list
					this.student_info = res.data.student_info
				}
			},
			href() {
				uni.navigateTo({
					url: '/page_admin/coach-side/class-home/students-detail/students-info?student_id=' + this
						.student_id + "&class_id=" + this.class_id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: rgb(255, 255, 255);
		min-height: 100vh;

		.header {
			padding: 34rpx 30rpx 30rpx;
			background-image: linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(144, 140, 246) 100%);

			.avatar {
				position: relative;
				margin-right: 19rpx;

				.age {
					position: absolute;
					padding: 3rpx 0 3rpx;
					width: 60rpx;
					text-align: center;
					background-color: rgb(47, 117, 250);
					border-radius: 30rpx;
					color: rgb(255, 255, 255);
					font-size: 22rpx;
					left: 0;
					right: 0;
					margin: auto;
					bottom: -5rpx;
				}

				.age-1 {
					background-color: rgb(255, 95, 255);
				}
			}

			.num {
				color: rgb(255, 255, 255);
				font-size: 24rpx;
				font-weight: 500;
				margin-bottom: 21rpx;
			}

			.tag {
				padding: 10rpx 20rpx 12rpx;
				background-color: rgb(255, 255, 255);
				border-radius: 20.5rpx;
				height: 42rpx;
				color: rgb(51, 51, 51);
				font-size: 24rpx;
				margin-right: 20rpx;
				font-weight: 500;

				text {
					color: rgb(235, 71, 81);
				}
			}

			.arrow {
				width: 40rpx;
				height: 40rpx;
				background-color: rgba(0, 0, 0, 0.3);
				border-radius: 50%;
			}
		}

		.con {
			padding: 0rpx 30rpx;
			padding-bottom: 30rpx;

			.item {
				background-color: rgb(255, 255, 255);
				box-shadow: 0px 6rpx 13.16rpx 0.84rpx rgba(23, 106, 180, 0.2);
				border-radius: 15rpx;
				overflow: hidden;
				margin-top: 30rpx;

				.top {
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					font-weight: 500;
					padding: 20rpx 20rpx 20rpx 21rpx;
				}

				.center {
					padding: 41rpx 0rpx;
					background-color: rgb(250, 250, 250);
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 700;

					.tag {
						color: rgb(255, 255, 255);
						font-size: 26rpx;
						font-weight: 500;
						padding: 7rpx 20rpx;
						margin: 0px 20rpx;
						border-radius: 49rpx;
						background-color: rgb(107, 196, 113);
					}
				}

				.warning {
					color: rgb(153, 153, 153);

					.tag {
						background-color: rgb(255, 65, 5);
					}
				}

				.error {
					color: rgb(153, 153, 153);

					.tag {
						background-color: rgb(220, 220, 220);
					}
				}

				.bottom {
					padding: 15rpx 20rpx 16rpx 20rpx;
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					font-weight: 500;

					image {
						width: 24rpx;
						height: 31rpx;
						margin-right: 9rpx;
					}
				}
			}
		}
	}
</style>